@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"
@import "ozaria/site/styles/play/variables"
@import "app/styles/style-flat-variables"
@import "ozaria/site/styles/common/variables"

#spell-palette-view
  transition: all 0.5s ease 0s
  position: absolute
  left: $spell-palette-left
  width: 0
  bottom: 0
  top: 0
  z-index: 9999
  @include transition(top 0.25s ease-in-out, width 0.25s ease-in-out)
  height: calc(80% - 14px)
  top: calc(20% + 14px)
  .shepherd-button
    top: 8px
  #spell-palette-api-bar[disabled=disabled]
    pointer-events: none
    #palette-tab-api-area
      opacity: 0.6
  #level-view.real-time &, #level-view.cinematic &
    display: none
    visibility: hidden
  &.open, &.expand
    border-width: 11px $api-bar-width 12px 0px
    left: 0
    width: 0
  &.open
    width: $api-bar-width + $spell-palette-right-width
    background-size: 376px 108%
    background-color: #fff
    .code-bank-close-btn
      right: -102px
  &.expand
    border: 14px solid #57B7B3
    width: $api-bar-width + $spell-palette-right-width + $spell-palette-left-width
  .code-bank-close-btn
    cursor: pointer
    position: absolute
    right: -92px
    top: calc(50% - 18px)
    transform: rotate(90deg)
    .rotated-spell-btn
      display: flex
      align-items: center
      justify-content: center
      background-repeat: no-repeat
      background-image: url(/images/ozaria/level/Button.svg)
      background-size: cover
      padding: 2px
    min-width: 140px
    border: none
    background-color: transparent
    outline: none
    span
      color: #215055
      font-family: "Work Sans"
      font-size: 17px
      font-weight: bold
      letter-spacing: 0.77px
      line-height: 20px
      text-transform: uppercase
      padding: 6px
      width: 90%
      text-align: center
    .code-bank-arrow
      background-position: center
      background-repeat: no-repeat
      width: 25px
      position: absolute
      height: 60px
      transform: rotate(-90deg)
    .code-bank-right-arrow
      background-image: url(/images/ozaria/level/code_bank_right_arrow.svg)
      top: -39px
    .code-bank-left-arrow
      bottom: -38px
      background-image: url(/images/ozaria/level/code_bank_left_arrow.svg)
    &:hover
      .code-bank-left-arrow
        background-image: url(/images/ozaria/level/code_bank_left_arrow_dark.svg)
      .code-bank-right-arrow
        background-image: url(/images/ozaria/level/code_bank_right_arrow_dark.svg)
      span
        background-color: #57B7B3
  .container
    transition: all 0.5s ease 0s
    overflow: hidden
    padding: 0
    height: 100%
    position: relative
    width: auto
    display: none
    .left
      position: absolute
      left: 0
      top: 0px
      bottom: 0px
      height: auto
      width: $spell-palette-left-width
      background-color: #f7f9f9

      .command-bank-header, .section-header, .sub-section-header
        display: block
        color: #000000
        margin-right: 10px
        width: $spell-palette-left-width

        .white-glyphicon
          color: #ffffff

      .command-bank-header
        height: 44px
        font-family: $body-font
        font-size: 20px
        font-weight: bold
        letter-spacing: 0.69px
        line-height: 27px
        padding: 5px 6px 0px 15px
      
      .section-header
        height: 35px
        box-shadow: inset 10px 0 0 0 rgb(84, 91, 100), inset 0 -1px 0 0 #e8e3e7
        font-family: "Work Sans"
        font-size: 16px
        font-weight: bold
        letter-spacing: 0.55px
        padding: 0px 0px 0px 25px
        background-color: #ffffff
        span
          line-height: 35px

      .sub-section-header
        height: 35px
        line-height: 35px
        background-color: #ffffff
        font-family: $code-font-style !important
        font-size: 16px
        padding: 0px 6px 0px 40px
        box-shadow: inset 10px 0 0 0 rgba(84, 91, 100, 0.6), inset 0 -1px 0 0 #e8e3e7
        cursor: pointer
        position: relative
        &:hover
          background-color: #E8FFFC
        .blue-glyphicon
          color: #5d73e1


      .spell-palette-thang-entry-view
        display: inline-block
        border: 5px solid black
        border-image: url(/images/level/thang_avatar_frame.png) 20 20 20 20 fill round
        margin: 1px

        img
          background-color: black
          width: 72px
          height: 72px
          border: 1px solid transparent
          cursor: pointer
        &:hover img
          border: 1px solid #f3cd90
        &.selected img
          border: 1px solid white
          cursor: auto

      .nano-slider
        background-color: rgba(243, 169, 49, 0.5)
    .right
      position: absolute
      right: 20px
      width: $spell-palette-right-width + 28
      left: $spell-palette-left-width
      top: 0px
      bottom: 0px
      background-color: #ffffff
      //width: calc(100% - #{$api-bar-width + 50px})
      @include box-shadow(0 0 0 #000)
      border-left: 1px solid #E8E3E7
      padding-right: 5px
      .scrollArea
        max-height: calc(100% - 20px)
        width: 100%
        margin-bottom: 20px
        position: relative
        overflow-y: auto

      .always-scroll-y
        overflow-y: scroll
        .description
          img
            float: left

      .popover-header
        background-color: #B6FFF7
        font-family: $code-font-style !important
        font-size: 18px
        line-height: 21px
        padding: 8px
        text-align: center
        color: #232323
      
      .popover-body
        font-family: "Work Sans"
        color: $gray
        padding: 5px 14px 0px 14px

        .short-description, .example, .args, .returns
          font-size: 18px
          letter-spacing: 0.71px
          line-height: 24px

        .description
          font-size: 16px
          letter-spacing: 0.6px
          line-height: 20px


      h1:not(.not-code), h2:not(.not-code), h3:not(.not-code), h4:not(.not-code), h5:not(.not-code), h6:not(.not-code)
        font-family: $code-font-style !important
        font-variant: normal
        color: purple
        text-transform: auto

        body[lang="he"] &, body[lang="ar"] &, body[lang="fa"] &, body[lang="ur"] &
          font-family: $code-font-style !important

      .popover-title
        background-color: transparent
        margin: 0 14px
        padding: 8px 0
        border-bottom-color: #ccc

      .popover-content
        max-height: 100%
        overflow-y: auto
        margin-right: 10px
        img
          float: right

      &.top .arrow
        bottom: -2%
      &.bottom .arrow
        top: -2%
      &.left .arrow
        right: 0%
      &.right .arrow
        left: -3%

      .docs-ace-container
        padding: 2px 4px
        border: 0.5px solid #979797
        border-radius: 4px
        padding: 5px

        &, .docs-ace
          font-size: 16px
          line-height: 19px
          font-family: $code-font-style !important

          body[lang="he"] &, body[lang="ar"] &, body[lang="fa"] &, body[lang="ur"] &
            font-family: $code-font-style !important

        .docs-ace
          .ace_cursor, .ace_bracket
            display: none
          .ace_gutter-active-line
            background: #ffffff

      .ace-tm
        color: $gray

      .ace-tm .ace_gutter
        background: #ffffff
        border-right: 1px solid #979797
        color: $gray

      code
        color: black
        font-family: $code-font-style !important
        font-size: 12px

        body[lang="he"] &, body[lang="ar"] &, body[lang="fa"] &, body[lang="ur"] &
          font-family: $code-font-style !important

    h4.tab
      color: white
      font-size: 16px
      line-height: 16px
      margin: 25px 0 5px 2px
      font-weight: normal
      text-transform: uppercase

    .nav > li > a
      padding: 2px 20px 0px 20px
      margin-bottom: 3px

    ul.nav.nav-pills
      margin-top: 3%

      h4
        margin-top: 2px
      li.active a
        background-color: transparent
      &.multiple-tabs li.active a
        background-color: darken(rgb(230, 212, 146), 30%)
      &.multiple-tabs li:not(.active) a
        cursor: pointer

    &:not(.hero)
      .tab-content
        height: 80px
        .nano-pane
          width: 7px
          right: 5px

    //.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus
    //  background-color: lighten(rgb(230, 212, 146), 10%)

    .property-entry-column
      display: inline-block
      margin-right: 3px
      vertical-align: top

  &.hero .properties
    @include flexbox()
    @include flex-wrap()
    @include flex-column()
    @include flex-align-content-start()

    .property-entry-item-group, .property-entry-item-sub-group
      min-height: 35px
      width: 212px
      position: relative
      background-color: rgb(20, 13, 8)

      img.item-image
        width: 38px
        height: 38px
        position: absolute
        top: 0px

      &:not(:hover) img.item-image
        -webkit-filter: contrast(50%) sepia(100%) saturate(500%) hue-rotate(7deg)
        filter: contrast(50%) sepia(100%) saturate(1000%) hue-rotate(7deg)

  &.shortenize.hero .properties
    .property-entry-item-group, .property-entry-item-sub-group
      width: $spell-palette-left-width
      .spell-palette-entry-view
        width: 100%
        height: 35px
        line-height: 35px
        position: relative
        padding: 0px 6px 0px 55px
        cursor: pointer
        box-shadow: inset 10px 0 0 0 rgba(84, 91, 100, 0.3), inset 0 -1px 0 0 #e8e3e7
        padding-right: 27px
        &:hover
          background-color: #E8FFFC
          &.selected
            background-color: #B6FFF7
        &.selected, &.selected span
          cursor: default
        &.selected .shepherd-button
          cursor: default
          background-image: url("")
  //Fixes punctuation but puts comment marker on right, which is apparently worse.
  //body[lang="he"] &, body[lang="ar"] &, body[lang="fa"] &, body[lang="ur"] &
  //  .ace_text-layer .ace_comment
  //    direction: rtl
  //    unicode-bidi: embed

  body[lang="he"] &, body[lang="ar"] &, body[lang="fa"] &, body[lang="ur"] &
    .rtl-right-aligned
      text-align: right

body[lang^='es']
  #spell-palette-view
    .code-bank-close-btn
      right: -138px
      width: 234px
    &.open
      .code-bank-close-btn
        right: -148px
body[lang='RU']
  #spell-palette-view
    .code-bank-close-btn
      .code-bank-left-arrow
        bottom: -38px
    .code-bank-close-btn
      .code-bank-right-arrow
        top: -39px
    .code-bank-close-btn
      right: -104px
      width: 164px
    &.open
      .code-bank-close-btn
        right: -114px
